<template>
  <div id="components-form-demo-advanced-search" class="table-page-search-wrapper">
    <a-form class="ant-advanced-search-form" :form="form" @submit="handleSearch">
      <a-row :gutter="24" style="background-color:#fff ;border:none">
        <a-col :xl="6" :lg="7" :md="8" :sm="24">
          <a-form-item label="商品名称">
            <a-input placeholder="请输入商品名称"></a-input>
          </a-form-item>
        </a-col>

        <a-col :xl="6" :lg="7" :md="8" :sm="24">
          <a-form-item label="SPU码">
            <a-input placeholder="请输入SPU码"></a-input>
          </a-form-item>
        </a-col>

        <a-col :xl="6" :lg="7" :md="8" :sm="24">
          <a-form-item label="ERP商品编号">
            <a-input placeholder="请输入ERP商品编号"></a-input>
          </a-form-item>
        </a-col>
        <!-- 隐藏的部分 -->
        <template v-if="toggleSearchStatus">
          <a-col :xl="4" :lg="4" :md="4" :sm="24">
            <a-form-item>
              <jdictseletctag></jdictseletctag>
            </a-form-item>
          </a-col>

          <a-col :xl="4" :lg="4" :md="4" :sm="24">
            <a-form-item>
              <jdictseletctag></jdictseletctag>
            </a-form-item>
          </a-col>

          <a-col :xl="10" :lg="11" :md="12" :sm="24">
            <a-form-item label="商品售价">
              <a-input placeholder="请输入最小值" class="query-group-cust">
              </a-input>
              <span class="query-group-split-cust"></span>
              <a-input placeholder="请输入最大值" class="query-group-cust">
              </a-input>
            </a-form-item>
          </a-col>

          <a-col :xl="4" :lg="4" :md="4" :sm="24">
            <a-form-item>
              <jdictseletctag></jdictseletctag>
            </a-form-item>
          </a-col>

          <!-- 更新时间 -->
          <a-col :xl="10" :lg="11" :md="12" :sm="24">
            <a-form-item label="更新时间">
              <a-range-picker @change="dateOnChange" />
            </a-form-item>
          </a-col>
        </template>

        <!-- 按钮功能部分 -->
        <a-col :xl="6" :lg="7" :md="8" :sm="24">
          <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
            <a-button type="primary" @click="haSsearchQuery" icon="search">查询</a-button>
            <a-button type="primary" @click="haSsearchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            <a @click="handleToggleSearch" style="margin-left: 8px">
              {{ toggleSearchStatus ? '收起' : '展开' }}
              <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
            </a>
          </span>
        </a-col>
      </a-row>
      <!-- <a-row>
        <a-col :span="24" :style="{ textAlign: 'right' }">
          <a-button type="primary" html-type="submit">
            搜索
          </a-button>
          <a-button :style="{ marginLeft: '8px' }" @click="handleReset">
            重置
          </a-button>
          <a :style="{ marginLeft: '8px', fontSize: '12px' }" @click="toggle">
            展开
            <a-icon :type="expand ? 'up' : 'down'" />
          </a>
        </a-col>
      </a-row> -->
    </a-form>

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button type="primary" @click="searchGoods">选择商品</a-button>
      <a-button type="primary">批量下架</a-button>
      <a-button type="primary">批量上架</a-button>
      <a-button type="primary">批量删除</a-button>
    </div>

    <div class="search-result-list">
      <!-- 蓝色框 -->
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择<a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
        <!-- 清空 -->
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>

        <span style="float: right">
          <a @click="loadData()">
            <a-icon type="sync" />刷新
          </a>
          <!-- 设置 -->
          <a-popover title="Title">
            <template slot="content">
              <p>Content</p>
              <p>Content</p>
            </template>
            <a>
              <a-icon type="setting" />设置
            </a>
          </a-popover>
        </span>
      </div>
      <!-- 表格内容 -->
      <FixedBlockFrom></FixedBlockFrom>
    </div>
    <!-- 弹窗,选择商品 -->
    <MerchandiSeselectionModel ref="merchModel"></MerchandiSeselectionModel>
  </div>
</template>
<script>
import MerchandiSeselectionModel from './common/MerchandiSeselectionModel.vue'
import jdictseletctag from './j-dict-select-tag'
import FixedBlockFrom from './fixedBlockFrom.vue'
export default {
  data() {
    return {
      toggleSearchStatus: false,
      expand: false,
      form: this.$form.createForm(this, { name: 'advanced_search' }),
      selectedRowKeys: []
    };
  },
  components: {
    jdictseletctag, FixedBlockFrom,MerchandiSeselectionModel
  },
  computed: {
    
    count() {
      return this.expand ? 6 : 4;
    },
  },
  updated() {
    console.log('updated');
  },
  methods: {
    searchGoods(){
      this.$refs.merchModel.visible=true
    },
    handleSearch(e) {
      e.preventDefault();
      this.form.validateFields((error, values) => {
        console.log('error', error);
        console.log('Received values of form: ', values);
      });
    },

    handleReset() {
      this.form.resetFields();
    },

    toggle() {
      this.expand = !this.expand;
    },
    // 更新时间
    dateOnChange() {
      console.log(' 更新时间 ----->  ',);
    },
    // 查询部分
    haSsearchQuery() {
      console.log(' 1212 ----->  ',);
    },
    haSsearchReset() {
      console.log(' 1212 ----->  ',);
    },
    handleToggleSearch() {
      console.log(' 121212 ----->  ',);
      this.toggleSearchStatus = !this.toggleSearchStatus
    },
    // tab展示
    // 清空
    onClearSelected() {
      console.log(' 清空 ----->  ',);
    },
    // 刷新
    loadData() {
      console.log('刷新  ----->  ', 刷新);
    }
  },
};
</script>
<style>
.ant-advanced-search-form {
  padding: 24px;
  background: #fbfbfb;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
}

.ant-advanced-search-form .ant-form-item {
  display: flex;
}

.ant-advanced-search-form .ant-form-item-control-wrapper {
  flex: 1;
}

#components-form-demo-advanced-search .ant-form {
  max-width: none;
  border: none;
}
#components-form-demo-advanced-search .search-result-list {
  margin-top: 16px;
  border: 1px dashed #fff;
  border-radius: 6px;
  background-color: #fff;
  min-height: 200px;
  text-align: center;
  padding-top: 20px;
}
</style>